<template>
  <div id="par">
    <!-- 文章详情 -->
    <article-module :data="particularsData">
      <h2 slot="article_title" class="par_title">{{particularsData.title}}</h2>
      <ul slot="articleInfo" class="article_info_list">
        <li @click="clickPraise">
          <i class="iconfont icon-xin1" v-if="heartShow"/>
          <i class="iconfont icon-xin" style="color:#f00" v-else/>
          {{particularsData.zancount}}
        </li>
        <li>评论数:({{particularsData.comcount}})</li>
        <li>阅读量:{{particularsData.click}}</li>
      </ul>
    </article-module>

    <!-- 评论区 -->
    <Comment id="comment" v-on:openLogin="clickPraise" :data="commentData"></Comment>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'

import articleModule from '@/components/articleModule/articleModule'
import Comment from '@/components/comment/Comment'

// 假数据
// import data from '@/mock/particularsData.json'

export default {
  name: 'parPage',
  props: ['goAnchorData'],
  components: {
    articleModule,
    Comment
  },
  data() {
    return {
      // 点赞状态
      heartShow: true,

      // 锚点跳转
      id: '#par'
    }
  },
  mounted() {
    // 数据渲染完成跳到指定位置
    this.getPageData()
    this.goAnchor()
  },
  computed: {
    ...mapState(['particularsData', 'commentData'])
  }
  ,
  methods: {
    // 点赞
    clickPraise() {
      this.$emit('openLogin')
    },
    // 跳转到评论区
    goAnchor() {
      if (this.goAnchorData == '#comment') {
        this.id = this.goAnchorData;
        document.querySelector(this.id).scrollIntoView(true);
      } else {
        this.id = '#par'
        document.querySelector(this.id).scrollIntoView(true);
      }
    },
    async getPageData() {
      //  console.log(this.$route.params.id)
      let pageId = this.$route.params.id
      let result= await axios.get('http://97079707.com/api/article/articleDetail?id=' + pageId)
      // console.log(result)
      let pageData = result.data
      if(pageData.status === 1){
        this.$store.commit('getParticularsData', pageData.data.article)
        this.$store.commit('getCommentData', pageData.data.comment)
      }
    }
  }
}
</script>

<style scoped>
.par_title {
  text-align: center;
}
.article_info_list > li:nth-child(1):hover {
  color: #fff;
  cursor: pointer;
}
</style>
